<template>
	<view class="content-baisc-layout">
		<view class="header-area">
			<!-- #ifndef H5 -->
			<u-navbar title-bold :is-fixed="false" :titleSize="34" title="" :is-back="false" :border-bottom="false"
				:background="{
				background:'url(https://resource.lanbaozixun.com/uploads/images/20240620205458f58af9669.png) no-repeat',
				backgroundSize:'100%'
			}" title-color="#2F3033">
			</u-navbar>
			<!-- #endif -->
			<!-- 搜索区域 -->
			<view class="secondary-classification-area u-flex">
				<view class="u-flex-1  nav" v-if="classifyLists.length">
					<swiper :current-item-id="navId" :display-multiple-items="5" ref="menu"
						:style="'height: 150rpx;'" @change="swiperChange">
						<swiper-item :class="'u-text-center ' + initializeProductClassifyFun(item)"
							:item-id="'product-outline-classify-' + item.id"
							v-for="(item, index) in classifyLists" :key="index" 
							@tap.stop="subClassifyChange(item)">
							<image class="nav-icon" :src="item.image"></image>
							<view class="name xs u-line-1 u-margin-top-10">{{item.name}}</view>
						</swiper-item>
					</swiper>
				</view>
				<image src="https://resource.lanbaozixun.com/uploads/images/202406202121526ba7e6806.png" mode="widthFix"
					class="show-all-btn" v-if="classifyLists.length > 5" @click="allProductClassifyPopupStatus = true"></image>
			</view>
		</view>
		
		<scroll-view scroll-y class="product-lists-area" :style="{
					'height':contentHeight,
				}" :scroll-into-view="navId" scroll-with-animation @scroll="productListsScroll">
			<view :id="'product-outline-classify-' + v.id" v-for="(v,k) in prodctData" :key="k"
				class="u-padding-top-15"
				:class="{'now-select-product-classify':'product-outline-classify-' + v.id == navId}">
				<view class="product-item-area u-padding-24">
					<view class="indicate"></view>
					<view class="row product-title u-padding-bottom-16">
						<view class="md u-padding-left-10 font-weight-500">{{v.name}}</view>
					</view>
					<view class=" row wrap">
						<view class="product-item u-text-center" v-for="(info,index) in v.product" :key="index"
							@click="openUrl(info.url)">
							<image :src="info.image" mode="scaleToFill" class="product-logo"></image>
							<view class="xs u-line-1">{{info.title||''}}</view>
							<view class="xs u-line-1 synopsis u-margin-top-8">{{info.synopsis||''}}</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="popup-area" v-if="allProductClassifyPopupStatus" :style="{
			top:'calc(' + headerHeight+ 'px )'
		}">
			<view class="product-classify-area">
				<view class=" u-flex u-flex-wrap">
					<view :class="'nav u-text-center u-margin-bottom-16 ' + initializeProductClassifyFun(item)" @tap.stop="subClassifyChange(item);allProductClassifyPopupStatus = false" v-for="(item, index) in classifyLists" :key="index">
						<image class="nav-icon" :src="item.image"></image>
						<view class="name xxs u-line-1">{{item.name}}</view>
					</view>
				</view>
				<view class="u-padding-top-12 u-text-center xs" @click="allProductClassifyPopupStatus = false">点击收起</view>
			</view>
		</view>
		<xy-loading v-if="loadingShowStatus"></xy-loading>
	</view>
</template>

<script>
	import {
		getProductOutlineCategoryData
	} from '@/api/store'
	import {
		getHome
	} from '@/api/store';
	import {
		getProductOutlineData
	} from '@/api/store';
	import {
		mapGetters,
	} from "vuex";
	export default {
		data() {
			return {
				navId:'',
				navList:[],
				navSwiperH:110,
				subCurrent:0,
				prodctData:[],
				classifyLists:[],
				contentHeight:0,
				currentSwiper:0,
				shop_login_logo:'',
				loadingShowStatus:true,
				allProductClassifyPopupStatus:false
			};
		},
		onLoad() {
			this.getProductOutlineCategoryDataFun()
			var _this = this;
			getProductOutlineData().then(res => {
				if(res.code == 1){
					_this.prodctData = res.data
				}
			})
			getHome().then(res => {
				if(res.code == 1){
					_this.shop_login_logo = res.data.shop_login_logo
					_this.news = res.data.news.map((e) => {return e.title})
				}
			})
			uni.$once('h5ShareSetFinished',function(w,o){
				o.shareTitle = '产品大纲';
				o.shareDesc = '产品大纲';
				w.share(o)
			})
		},
		onReady() {
			const _this = this;
			const query = uni.createSelectorQuery().in(this);
			setTimeout(()=>{
				query.select('.header-area').boundingClientRect((e) => {
					_this.headerHeight = e.height
					_this.contentHeight = 'calc(100vh - ' + this.headerHeight + 'px - 20rpx)'
				}).exec();
			},500)
		},
		onShareAppMessage() {
			const shareInfo = Cache.get("shareInfo");
			return {
				title: '产品大纲',
				path: "pages/product_outline/product_outline?invite_code=" + this.inviteCode,
				imageUrl: shareInfo.mnp_share_image,
			};
		},
		onShareTimeline() {
			const shareInfo = Cache.get("shareInfo");
			return {
				title: '产品大纲',
				path: "pages/product_outline/product_outline?invite_code=" + this.inviteCode,
				imageUrl: shareInfo.mnp_share_image,
			};
		},
		computed: {
			...mapGetters(["inviteCode"]),
		},
		methods:{
			swiperChange(e) {
				this.currentSwiper = e.detail.current;
			},
			subClassifyChange(e) {
				this.subCurrent = e.id;
				this.navId = 'product-outline-classify-'+ e.id;
			},
			initializeProductClassifyFun(e){
				let className = '';
				
				if(this.navId == 'product-outline-classify-'  + e.id){
					switch(e.style_type){
						case 1:
							className = 'style-one'
							break;
						case 2:
							className = 'style-tow'
							break;
						case 3:
							className = 'style-three'
							break;
					}
				}
				
				return className;
			},
			classifyChange(e) {
				this.currentSwiper = e.detail.current;
			},
			selectClassifyChange(e) {
				this.navId = 'product-outline-classify-' + e.id;
				this.subCurrent = e.id;
			},
			async getProductOutlineCategoryDataFun() {
				const _this = this;
				let {
					data
				} = await getProductOutlineCategoryData();
				this.classifyLists = data;
				this.loadingShowStatus = false;
				this.navId = 'product-outline-classify-' + data[0].id
			},
			productListsScroll(e) {
				const _this = this;
				let d = {};
				uni.createSelectorQuery().in(this).selectAll(".product-lists-area .u-padding-top-15")
				.boundingClientRect((data) => {
					data.forEach((v,k) => {
						let top = v.top - _this.headerHeight
						if(top <= 48 ){
							d = v;
						}
					})
					if(_this.navId != d.id && d.id != undefined)_this.navId = d.id;
				})
				.exec();
				
			},
			openUrl(e){
				// #ifdef APP || MP-WEIXIN
					uni.navigateTo({
					  url: "/pages/webview/webview?url=" + e,
					});
				// #endif
				// #ifndef APP || MP-WEIXIN
					window.location.href = e;
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(180deg, white 0%, white 100%);
	
		.content-baisc-layout {
			background: url('https://resource.lanbaozixun.com/uploads/images/20240620205458f58af9669.png') no-repeat;
			background-size: 100%;
	
			.header-area {
				top: 0;
				position: sticky;
	
	
				.search-area {
					padding: 6px 22rpx;
	
					.search-content {
						color: #C8C9CC;
						padding: 10rpx 32rpx;
						border-radius: 100px;
						background: rgba(255, 255, 255, 0.9);
	
						@keyframes shake-animation {
							0% {
								transform: rotate(0deg);
							}
	
							25% {
								transform: rotate(-15deg);
							}
	
							50% {
								transform: rotate(15deg);
							}
	
							75% {
								transform: rotate(-15deg);
							}
	
							100% {
								transform: rotate(0deg);
							}
						}
	
						.icon {
							width: 30rpx;
							animation: shake-animation 1s infinite;
						}
					}
				}
	
				.primary-classification-area {
	
					.primary-classification-item {
						padding: 20rpx 0;
						border-radius: 36rpx 36rpx 0px 0px;
						background: rgba(146, 211, 211, 0.3);
					}
	
					.primary-classification-selected {
						font-size: 32rpx;
						font-weight: 500;
						padding: 26rpx 0;
						position: relative;
						border-radius: 36rpx 36rpx 0px 0px;
						background: rgba(153, 214, 254, 1);
						box-shadow: inset 0px 2px 4px rgba(158, 216, 254, 1);
	
						&:before {
							content: ' ';
							left: 42%;
							right: 42%;
							height: 7rpx;
							bottom: 18rpx;
							position: absolute;
							border-radius: 183px;
							background: linear-gradient(90deg, rgba(26, 160, 251, 0) 0%, rgba(26, 160, 251, 1) 100%);
						}
					}
				}
	
			}
	
			.secondary-classification-area {
				height: 178rpx;
				position: relative;
				padding: 24rpx 0 24rpx 24rpx;
				background: linear-gradient(0, rgba(255, 255, 255, 0) 0%, rgba(224, 242, 255, .1) 50.27%, rgba(153, 214, 254, 1));
	
				.show-all-btn {
					width: 24rpx;
					margin: 10rpx 10rpx;
				}
	
				.nav {
					position: relative;
					border-radius: 14rpx;
	
					.nav-icon {
						width: 80rpx;
						height: 80rpx;
						padding: 6rpx;
						border-radius: 36rpx;
						box-shadow: 0px 24rpx 24rpx -24rpx rgba(0, 0, 0, 0.2);
						background: transparent;
					}
	
					.name {
						padding: 3rpx 0;
						border-radius: 30rpx;
					}
	
					.style-one {
						.nav-icon {
							background: linear-gradient(135.61deg, rgba(138, 222, 255, 1) 0%, rgba(85, 145, 250, 1) 100%);
						}
	
						.name {
							color: white;
							background: linear-gradient(180deg, rgba(31, 165, 255, 1) 0%, rgba(43, 184, 240, 1) 100%);
						}
					}
	
					.style-tow {
						.nav-icon {
							background: linear-gradient(136.23deg, rgba(242, 216, 167, 1) 0%, rgba(255, 181, 54, 1) 100%);
						}
	
						.name {
							color: white;
							background: linear-gradient(185.52deg, rgba(244, 160, 46, 1) 0%, rgba(252, 191, 86, 1) 100%);
						}
					}
	
					.style-three {
						.nav-icon {
							background: linear-gradient(136.34deg, rgba(255, 226, 217, 1) 0%, rgba(254, 159, 140, 1) 100%);
						}
	
						.name {
							color: white;
							background: linear-gradient(180deg, rgba(244, 58, 42, 1) 0%, rgba(247, 163, 139, 1) 100%);
						}
					}
				}
			}
	
			.product-lists-area {
				background: linear-gradient(to bottom, rgba(26, 160, 251, 0) 0%, rgba(26, 160, 251, 1) 100%) no-repeat;
				background-size: 100% 100px;
	
				.now-select-product-classify {
					@keyframes indicate-animation {
						0% {
							left: 24rpx;
						}
	
						100% {
							left: 10%;
						}
					}
	
					.indicate {
						left: 24rpx;
						top: -30rpx;
						width: 30rpx;
						height: 30rpx;
						overflow: hidden;
						position: absolute;
						animation-name: indicate-animation;
						animation-duration: 1s;
						animation-iteration-count: 1;
						animation-fill-mode: forwards;
	
						&:before {
							z-index: 1;
							top: -4rpx;
							left: -11rpx;
							content: ' ';
							width: 30rpx;
							height: 30rpx;
							position: absolute;
							transform-origin: bottom;
							transform: rotate(136deg);
							background-color: rgba(247, 250, 255, 1);
							border: 1px solid rgba(149, 207, 245, 0.24);
						}
					}
				}
	
				.product-item-area {
					position: relative;
					border-radius: 50rpx 50rpx 0 0;
					border: 1px solid rgba(149, 207, 245, 0.24);
					background: linear-gradient(180deg, rgba(247, 250, 255, 1) 0%, rgba(250, 252, 255, 1) 100%);
	
					.product-title{
						position: relative;
						
						&:before{
							bottom: 22rpx;
							height: 16rpx;
							width: 22rpx;
							left: 6rpx;
							content: ' ';
							position: absolute;
							background: url(https://resource.lanbaozixun.com/uploads/images/202406151532511db983801.png) no-repeat;
							background-size: 100% 100%;
						}
					}
	
					.product-item {
						width: 33.3%;
						padding: 16rpx;
	
						.product-logo {
							width: 90rpx;
							height: 90rpx;
							border-radius: 10rpx;
						}
						
						.synopsis{
							color: #666666;
							border-radius: 30rpx;
							padding: 3rpx 12rpx;
							display: inline-block;
							background: rgba(233, 243, 247, 1);
						}
					}
	
				}
			}
		}
	}
	
	.popup-area {
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		position: fixed;
		background: rgba(0, 0, 0, 0.4);
	
		.product-classify-area {
			padding: 24rpx 24rpx 12rpx 24rpx;
			border-radius: 0px 0px 36rpx 36rpx;
			background: linear-gradient(to bottom, rgba(153, 214, 254, 1) 70%, rgba(247, 250, 255, 1) 100%);
			border: 2rpx solid rgba(101, 184, 240, 0.24);
			border-top: 0 solid transparent;
			box-shadow: inset 0px 2px 4px rgba(135, 200, 214, 0.14);
	
			.nav {
				width: 20%;
	
				.nav-icon {
					width: 80rpx;
					height: 80rpx;
					padding: 6rpx;
					border-radius: 36rpx;
					box-shadow: 0px 24rpx 24rpx -24rpx rgba(0, 0, 0, 0.2);
					background: transparent;
				}
	
				.name {
					font-weight: 500;
					padding: 3rpx 16rpx;
					border-radius: 30rpx;
					display: inline-block;
				}
	
	
			}
	
			.style-one {
				.nav-icon {
					background: linear-gradient(135.61deg, rgba(138, 222, 255, 1) 0%, rgba(85, 145, 250, 1) 100%);
				}
	
				.name {
					color: white;
					background: linear-gradient(180deg, rgba(31, 165, 255, 1) 0%, rgba(43, 184, 240, 1) 100%);
				}
			}
	
			.style-tow {
				.nav-icon {
					background: linear-gradient(136.23deg, rgba(242, 216, 167, 1) 0%, rgba(255, 181, 54, 1) 100%);
				}
	
				.name {
					color: white;
					background: linear-gradient(185.52deg, rgba(244, 160, 46, 1) 0%, rgba(252, 191, 86, 1) 100%);
				}
			}
	
			.style-three {
				.nav-icon {
					background: linear-gradient(136.34deg, rgba(255, 226, 217, 1) 0%, rgba(254, 159, 140, 1) 100%);
				}
	
				.name {
					color: white;
					background: linear-gradient(180deg, rgba(244, 58, 42, 1) 0%, rgba(247, 163, 139, 1) 100%);
				}
			}
	
		}
	}
</style>